<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册组件</title>
</head>
<body>
<div id="demo">
    <my-component>
        <parent></parent>
    </my-component>
</div>
<script src="../js/vue.js"></script>
<script>
    //定义
    //局部注册tag为components
    var child = Vue.extend({});
    var MyComponent = Vue.extend({
        template: '<div>A custom component!</div>',
        components: {
            //<my-component>只能用在父组件模板内
            'my-component': child
        }
    });
    //注册Vue.component(tag, constructor),全局注册组件tag为my-component
    Vue.component('my-component', MyComponent);
    //注册语法糖
    Vue.component('my-component', {
        template: '<h1>父组件</h1>'
    });
    var parent = Vue.extend({
        components: {
            'my-component': {template: '<h2>子组件</h2>'}
        }
    });
    //创建根实例
    new Vue({
        el: '#demo',
        data: {}
    });
</script>
</body>
</html>